<template>
  <div>
    <HeaderCity />
    <SearchCity :cities='cities' />
    <ListCity :letter='letter' :cities='cities' :hotCities='hotCities' />
    <Alphabet @letter='handleLetterChange' :cities='cities' />
  </div>
</template>

<script>
import axios from 'axios'
import HeaderCity from './components/HeaderCity.vue'
import SearchCity from './components/SearcchCity.vue'
import ListCity from './components/ListCity.vue'
import Alphabet from './components/Alphabet.vue'
export default {
  name: 'city',
  components: {
    HeaderCity,
    SearchCity,
    ListCity,
    Alphabet
  },
  data () {
    return {
      cities: {},
      hotCities: [],
      letter: ''
    }
  },
  mounted () {
    this.getCityInfo()
  },
  methods: {
    getCityInfo () {
      axios.get('http://localhost:8080/mock/city.json').then(res => {
        res = res.data
        if (res.ret && res.data) {
          const data = res.data
          this.cities = data.cities
          this.hotCities = data.hotCities
        }
      })
    },
    handleLetterChange (letter) {
      this.letter = letter
    }
  }
}
</script>

<style lang="stylus" scoped>

</style>
